<template>
  <div class="payment-container">
    <!-- 头部 -->
    <div class="header">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <i class="icon-back">←</i>
        </button>
        <h4 class="page-title">支付</h4>
      </div>
    </div>

    <div class="payment-content">
      <!-- 支付金额 -->
      <div class="amount-section">
        <div class="amount-display">
          <span class="currency">¥</span>
          <span class="amount">{{ paymentAmount }}</span>
        </div>
        <p class="order-info">订单号：{{ orderInfo.order_no }}</p>
      </div>

      <!-- 支付方式选择 -->
      <div class="payment-methods">
        <h4 class="section-title">选择支付方式</h4>
        <div class="method-list">
          <div
            class="method-item"
            v-for="(method, index) in paymentMethods"
            :key="index"
            :class="{ active: selectedMethodIndex === index }"
            @click="selectPaymentMethod(index)">
            <div class="method-icon">
              <img :src="method.icon" :alt="method.name" />
            </div>
            <div class="method-info">
              <h4 class="method-name">{{ method.name }}</h4>
              <p class="method-desc">{{ method.description }}</p>
            </div>
            <div class="method-radio">
              <span class="radio" :class="{ checked: selectedMethodIndex === index }"></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 优惠券 -->
      <div class="coupon-section">
        <div class="coupon-item" @click="showCouponModal = true">
          <div class="coupon-icon">🎫</div>
          <div class="coupon-info">
            <span class="coupon-text">优惠券 {{ availableCoupons.length }} 张</span>
            <span class="coupon-desc" v-if="selectedCoupon"> 已选择：{{ selectedCoupon.coupon_name }} -¥{{ selectedCoupon.couponAmount }} </span>
            <span class="coupon-desc" v-else>选择可用优惠券</span>
          </div>
          <div class="coupon-arrow">></div>
        </div>
      </div>

      <!-- 支付详情 -->
      <div class="payment-details">
        <h4 class="section-title">支付详情</h4>
        <div class="detail-list">
          <div class="detail-item">
            <span class="detail-label">商品金额</span>
            <span class="detail-value">¥{{ goodAmount }}</span>
          </div>
          <div class="detail-item" v-if="shippingFee > 0">
            <span class="detail-label">运费</span>
            <span class="detail-value">¥{{ shippingFee }}</span>
          </div>
          <div class="detail-item" v-if="selectedCoupon">
            <span class="detail-label">优惠券</span>
            <span class="detail-value discount">-¥{{ selectedCoupon.couponAmount }}</span>
          </div>
          <div class="detail-item total">
            <span class="detail-label">实付金额</span>
            <span class="detail-value">¥{{ paymentAmount }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部支付按钮 -->
    <div class="payment-footer">
      <div class="payment-info">
        <span class="total-label">实付：</span>
        <span class="total-amount">¥{{ paymentAmount }}</span>
      </div>
      <button class="pay-btn" @click="handlePayment" :disabled="!canPay">确认支付</button>
    </div>

    <!-- 优惠券选择弹窗 -->
    <div class="modal-overlay" v-if="showCouponModal" @click="showCouponModal = false">
      <div class="coupon-modal" @click.stop>
        <div class="modal-header">
          <h3>选择优惠券</h3>
          <button class="close-btn" @click="showCouponModal = false">×</button>
        </div>
        <div class="modal-content">
          <div class="coupon-list">
            <div
              class="coupon-card"
              v-for="(coupon, index) in availableCoupons"
              :key="index"
              :class="{
                active: selectedCouponIndex === index,
                disabled: coupon.coupon_status !== 2,
              }"
              @click="selectCoupon(index)">
              <div class="coupon-left" v-if="coupon.content_type === 3">
                <div class="coupon-amount">{{ coupon.discount }}折</div>
              </div>
              <div class="coupon-left" v-else>
                <div class="coupon-amount">¥{{ coupon.coupon_amount }}</div>
                <div class="coupon-condition" v-if="coupon.content_type === 1">满 {{ coupon.threshold }} 元可用</div>
              </div>
              <div class="coupon-right">
                <h4 class="coupon-name">{{ coupon.coupon_name }}</h4>
                <!-- <p class="coupon-validity">{{ coupon.coupon_scene }}</p> -->
                <p class="coupon-validity">有效期至 {{ formatDate(coupon.coupon_end_time) }}</p>
                <span class="coupon-status" v-if="coupon.coupon_status !== 2">不可用</span>
              </div>
            </div>

            <div class="no-coupon-option" :class="{ active: selectedCouponIndex === -1 }" @click="selectCoupon(-1)">
              <span>不使用优惠券</span>
              <span class="radio" :class="{ checked: selectedCouponIndex === -1 }"></span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="confirm-btn" @click="confirmCoupon">确认</button>
        </div>
      </div>
    </div>

    <!-- 支付结果弹窗 -->
    <div class="modal-overlay" v-if="showPaymentResult" @click="closePaymentResult">
      <div class="payment-result-modal" @click.stop>
        <div class="result-icon">
          <span v-if="paymentSuccess">✅</span>
          <span v-else>❌</span>
        </div>
        <h3 class="result-title">
          {{ paymentSuccess ? '支付成功' : '支付失败' }}
        </h3>
        <p class="result-message">
          {{ paymentSuccess ? '您的订单已支付成功，我们将尽快为您处理' : '支付过程中出现问题，请重试：' + (paymentMessage || '') }}
        </p>
        <div class="result-actions">
          <button class="result-btn" @click="goToOrders" v-if="paymentSuccess">查看订单</button>
          <button class="result-btn secondary" @click="closePaymentResult">
            {{ paymentSuccess ? '继续购物' : '重新支付' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 微信支付二维码 -->
    <el-dialog v-model="dialogVisible" :modal="true" :close-on-click-modal="false" :width="400">
      <div class="qr-with-text">
        <h2>茶船古道梧州六堡茶官方商城</h2>
        <VueQrcode :value="weixinCodeUrl" :options="{ width: 200 }" tag="img" />
        <p class="text-below">¥ {{ paymentAmount.toFixed(2) }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, computed, onMounted, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import apiOrder from '@/api/modules/order'
  import apiCoupon from '@/api/modules/coupon'
  import apiUser from '@/api/modules/user'
  import { useUserStore } from '@/stores/user.js'
  import VueQrcode from '@chenfengyuan/vue-qrcode'

  const router = useRouter()
  const route = useRoute()
  const userStore = useUserStore()
  const { proxy } = getCurrentInstance()

  // 从store获取用户状态（保持响应性）
  const isLoggedIn = computed(() => userStore.isLoggedIn)
  const userInfo = computed(() => userStore.userInfo)

  // 基础数据
  const orderId = ref(route.query.orderId ? route.query.orderId : '')
  const orderInfo = ref({})
  const orderProducts = ref([])
  const goodAmount = ref(0)
  const shippingFee = ref(0)
  const balance = ref(0)

  // 微信支付
  const dialogVisible = ref(false)
  const weixinCodeUrl = ref('')

  // 初始化
  onMounted(() => {
    loadOrderData()
    loadAccountInfo()
    loadCouponValid()
  })

  const loadOrderData = () => {
    apiOrder.GetOrdersInfo({ id: orderId.value }).then(async (res) => {
      orderInfo.value = res.data
      orderProducts.value = orderInfo.value.products
      goodAmount.value = orderInfo.value.goods_amount
      shippingFee.value = orderInfo.value.post_amount
    })
  }

  const loadAccountInfo = () => {
    apiUser.GetAccountInfo().then(async (res) => {
      if (res.data && res.data.balance) {
        balance.value = parseFloat(res.data.balance)
        paymentMethods.value[2].description = '当前账户余额：￥' + balance.value.toFixed(2)
      }
    })
  }

  const loadCouponValid = () => {
    apiUser.GetCouponList({ page: 1, limit: 100, coupon_status: 2 }).then(async (res) => {
      availableCoupons.value = res.data
    })
  }

  // 支付方式
  import wechatPayIcon from '@/assets/images/微信支付.png'
  import alipayIcon from '@/assets/images/支付宝.png'
  import bankIcon from '@/assets/images/银行卡.png'
  const selectedMethodIndex = ref(0)
  const paymentMethods = ref([
    {
      type: 1,
      name: '微信支付',
      description: '推荐使用微信支付',
      icon: wechatPayIcon,
    },
    {
      type: 2,
      name: '支付宝',
      description: '支持花呗分期付款',
      icon: alipayIcon,
    },
    {
      type: 5,
      name: '账户余额',
      description: '当前账户余额：￥0.00',
      icon: bankIcon,
    },
  ])

  // 支付密码弹窗
  const passwordPopupShow = ref(false)
  const paymentPassword = ref('')
  const keyboard = ref([
    ['1', '2', '3'],
    ['4', '5', '6'],
    ['7', '8', '9'],
    ['', '0', 'delete'],
  ])

  // 优惠券
  const showCouponModal = ref(false)
  const selectedCouponIndex = ref(-1)
  const selectedCoupon = ref(null)
  const availableCoupons = ref([])

  // 支付结果
  const showPaymentResult = ref(false)
  const paymentSuccess = ref(false)
  const paymentMessage = ref('')

  // 计算属性
  const paymentAmount = computed(() => {
    let amount = goodAmount.value + shippingFee.value
    if (selectedCoupon.value) {
      amount -= selectedCoupon.value.couponAmount
    }
    return Math.max(amount, 0)
  })

  const canPay = computed(() => {
    if (selectedMethodIndex.value >= 0 && paymentMethods.value[selectedMethodIndex.value].type === 5) {
      return paymentAmount.value > 0 && balance.value >= paymentAmount.value && orderInfo.value.order_status === 0
    } else {
      return selectedMethodIndex.value >= 0 && paymentAmount.value > 0 && orderInfo.value.order_status === 0
    }
  })

  // 方法
  const goBack = () => {
    router.go(-1)
  }

  const selectPaymentMethod = (index) => {
    selectedMethodIndex.value = index
  }

  // 勾选优惠券
  const selectCoupon = (index) => {
    if (index >= 0 && !availableCoupons.value[index].coupon_status === 2) {
      return
    }
    selectedCouponIndex.value = index
  }

  // 确定使用优惠券
  const confirmCoupon = () => {
    if (selectedCouponIndex.value >= 0) {
      selectedCoupon.value = availableCoupons.value[selectedCouponIndex.value]
      // 优惠内容（1:满减券 2:直减券 3:折扣券）
      let couponAmount = 0
      if (selectedCoupon.value.content_type === 3) {
        couponAmount = (parseFloat(goodAmount.value) * parseFloat(selectedCoupon.value.discount)) / 100
      } else if (selectedCoupon.value.content_type === 2) {
        couponAmount = selectedCoupon.value.coupon_amount
      } else if (selectedCoupon.value.content_type === 1) {
        if (parseFloat(goodAmount.value) > parseFloat(selectedCoupon.value.threshold)) {
          couponAmount = selectedCoupon.value.coupon_amount
        }
      }
      selectedCoupon.value.couponAmount = couponAmount
    } else {
      selectedCoupon.value = null
    }
    showCouponModal.value = false
  }

  const handlePayment = () => {
    if (!canPay.value) {
      return
    }

    const pay_type = paymentMethods.value[selectedMethodIndex.value].type
    const orderData = {
      order_ids: orderId.value,
      receive_type: orderInfo.receive_type,
      pay_type: pay_type,
      couponInfo: selectCoupon.value,
      buyer_words: orderInfo.buyer_words,
      paymentPassword: proxy.$encryptAES(paymentPassword.value), // 支付密码(加密)
      goodAmount: goodAmount.value,
      shippingFee: shippingFee.value,
      couponAmount: selectedCoupon.value?.couponAmount || 0,
      orderAmount: goodAmount.value + shippingFee.value,
      finalAmount: paymentAmount.value,
    }

    // 保存支付方式和优惠券等信息
    apiOrder.EditOrders(orderData).then(async (res) => {
      if (pay_type === 5) {
        // 如果是余额支付，需要输入密码
        passwordPopupShow.value = true
        if (userInfo.password_secure === '已设置') {
          ElMessageBox.prompt('请输入支付密码', '支付', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /\d{6}/,
            inputErrorMessage: '请输入6位支付密码',
          }).then(({ value }) => {
            paymentPassword.value = value
            processPayment()
          })
        } else {
          ElMessage.error('您尚未设置支付密码，请先设置在进行支付！')
        }
      } else {
        // 其他支付方式直接调用支付
        processPayment()
      }
    })
  }

  // 输入支付密码
  const inputPassword = (key) => {
    if (key === 'delete') {
      paymentPassword.value = paymentPassword.value.slice(0, -1)
    } else if (key && paymentPassword.value.length < 6) {
      paymentPassword.value += key

      // 密码输入完成
      if (paymentPassword.value.length === 6) {
        setTimeout(() => {
          processPayment()
        }, 300)
      }
    }
  }

  // 处理支付
  const processPayment = () => {
    const pay_type = paymentMethods.value[selectedMethodIndex.value].type
    const paymentData = {
      pay_order_id: orderId.value,
      good_desc: orderProducts.value[0].spu_name + ' 共' + orderProducts.value.length + '件商品',
      paymentPassword: proxy.$encryptAES(paymentPassword.value), // 支付密码(加密)
    }
    apiOrder
      .PayOrders(paymentData)
      .then(async (res) => {
        if (pay_type === 5) {
          // 余额支付成功
          paymentSuccess.value = true
          showPaymentResult.value = true
          paymentMessage.value = ''
        } else if (pay_type === 1) {
          // 微信支付：微信网页支付（NATIVE---商家出示二维码, JSAPI---需要openid）
          const code_url = res.data.code_url // 时效性为2小时
          if (code_url && code_url != '') {
            // 生成支付二维码
            weixinCodeUrl.value = code_url
            dialogVisible.value = true
            // 订单状态：0-待确认/待支付（订单创建完毕）2-已支付 3-备货中 4-部分发货 5-已发货（全部发货）6-已取消 7-已完成（已收货）
            const timer = setInterval(() => {
              apiOrder.GetOrdersInfo({ id: orderId.value }).then(async (res) => {
                orderInfo.value = res.data
                orderProducts.value = orderInfo.value.products
                goodAmount.value = orderInfo.value.goods_amount
                shippingFee.value = orderInfo.value.post_amount
                if ([2, 3, 4, 5, 7].includes(orderInfo.value.order_status)) {
                  paymentSuccess.value = true
                  showPaymentResult.value = true
                  paymentMessage.value = ''
                  clearInterval(timer)
                }
              })
            }, 2000)
          }
        } else if (pay_type === 2) {
          console.log('支付宝支付', res.data)
          // 支付宝支付（支付结果需要通过异步通知或轮询查询），或者使用JSAPI方式（需要商户授权）
          orderInfo.value.out_trade_no = res.out_trade_no
          // const div = document.createElement('div')
          // div.innerHTML = res.data
          // document.body.appendChild(div)
          // document.forms[0].submit()
          AlipayJSBridge.call(
            'tradePay',
            {
              tradeNO: orderInfo.value.out_trade_no,
              bizContext: res.data, // 后端返回的支付参数
            },
            function (data) {
              if (data.resultCode === '9000') {
                // 支付成功
                paymentSuccess.value = true
                showPaymentResult.value = true
                paymentMessage.value = ''
              } else if (data.resultCode === '8000' || data.resultCode === '6004') {
                // 正在处理中	支付结果未知（可能已支付成功），需查询订单状态
                paymentSuccess.value = true
                showPaymentResult.value = true
                paymentMessage.value = '正在处理中'
              } else if (data.resultCode === '4000') {
                // 订单支付失败	提示用户支付失败，允许重新支付
                paymentSuccess.value = false
                showPaymentResult.value = true
                paymentMessage.value = '订单支付失败'
              } else if (data.resultCode === '5000') {
                // 重复请求	用户可能连续点击，检查订单是否已支付
                paymentSuccess.value = false
                showPaymentResult.value = true
                paymentMessage.value = '重复请求'
              } else if (data.resultCode === '6001') {
                // 用户中途取消	用户主动取消支付，提示用户
                paymentSuccess.value = false
                showPaymentResult.value = true
                paymentMessage.value = '用户取消支付'
              } else if (data.resultCode === '6002') {
                // 网络连接出错	检查网络后提示用户重试
                paymentSuccess.value = false
                showPaymentResult.value = true
                paymentMessage.value = '网络连接出错'
              } else {
                paymentSuccess.value = false
                showPaymentResult.value = true
                paymentMessage.value = '支付宝支付失败'
              }
            }
          )
        }
      })
      .catch((err) => {
        console.log('支付宝支付', err)
        paymentSuccess.value = false
        showPaymentResult.value = true
        paymentMessage.value = err.msg || err.errMsg
      })
  }

  const closePaymentResult = () => {
    showPaymentResult.value = false
    if (!paymentSuccess.value) {
      // 支付失败，留在当前页面
      return
    }
    // 支付成功，返回首页
    router.push('/')
  }

  const goToOrders = () => {
    router.push('/orders')
  }

  const formatDate = (date) => {
    try {
      const newDate = new Date(date)
      const year = newDate.getFullYear()
      const month = String(newDate.getMonth() + 1).padStart(2, '0')
      const day = String(newDate.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    } catch (error) {
      return ''
    }
  }
</script>

<style scoped>
  .payment-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 80px;
  }

  /* 头部样式 */
  .header {
    background-color: #1c705e;
    color: white;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header-content {
    display: flex;
    align-items: center;
    height: 56px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .back-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    margin-right: 16px;
  }

  .page-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
  }

  /* 内容区域 */
  .payment-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  /* 金额显示 */
  .amount-section {
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .amount-display {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 8px;
  }

  .currency {
    font-size: 24px;
    color: #e53935;
    margin-right: 4px;
  }

  .amount {
    font-size: 36px;
    font-weight: 600;
    color: #e53935;
  }

  .order-info {
    color: #666;
    margin: 0;
    font-size: 14px;
  }

  /* 通用区块样式 */
  .payment-methods,
  .payment-details {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
  }

  /* 支付方式样式 */
  .method-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .method-item {
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .method-item.active {
    border-color: #1c705e;
    background-color: #f0f8f5;
  }

  .method-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .method-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .method-info {
    flex: 1;
  }

  .method-name {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #333;
  }

  .method-desc {
    margin: 0;
    font-size: 14px;
    color: #666;
  }

  .method-radio {
    margin-left: auto;
  }

  .radio {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    position: relative;
  }

  .radio.checked {
    border-color: #1c705e;
  }

  .radio.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #1c705e;
    border-radius: 50%;
  }

  /* 优惠券样式 */
  .coupon-section {
    background: white;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .coupon-item {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .coupon-item:hover {
    background-color: #f8f8f8;
  }

  .coupon-icon {
    font-size: 24px;
  }

  .coupon-info {
    flex: 1;
  }

  .coupon-text {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  .coupon-desc {
    display: block;
    font-size: 14px;
    color: #666;
    margin-top: 4px;
  }

  .coupon-arrow {
    color: #ccc;
    font-size: 16px;
  }

  /* 支付详情样式 */
  .detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
  }

  .detail-item.total {
    border-top: 1px solid #e5e5e5;
    padding-top: 12px;
    font-weight: 600;
    font-size: 16px;
  }

  .detail-label {
    color: #666;
  }

  .detail-value {
    color: #333;
    font-weight: 500;
  }

  .detail-value.discount {
    color: #e53935;
  }

  .detail-item.total .detail-value {
    color: #e53935;
    font-size: 18px;
  }

  /* 底部支付按钮 */
  .payment-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 16px 20px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
  }

  .payment-info {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .total-label {
    font-size: 16px;
    color: #666;
  }

  .total-amount {
    font-size: 20px;
    font-weight: 600;
    color: #e53935;
  }

  .pay-btn {
    background-color: #1c705e;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .pay-btn:hover {
    background-color: #155a4a;
  }

  .pay-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }

  /* 弹窗样式 */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .coupon-modal,
  .payment-result-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
  }

  .modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
  }

  .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
  }

  .modal-content {
    padding: 20px;
  }

  .modal-footer {
    padding: 20px;
    border-top: 1px solid #e5e5e5;
  }

  .confirm-btn {
    width: 100%;
    padding: 12px;
    background-color: #1c705e;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
  }

  /* 优惠券卡片样式 */
  .coupon-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .coupon-card {
    display: flex;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .coupon-card.active {
    border-color: #1c705e;
  }

  .coupon-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .coupon-left {
    background: linear-gradient(135deg, #1c705e, #2d8a6e);
    color: white;
    padding: 20px;
    text-align: center;
    min-width: 100px;
  }

  .coupon-amount {
    font-size: 20px;
    font-weight: 600;
  }

  .coupon-condition {
    font-size: 12px;
    margin-top: 4px;
  }

  .coupon-right {
    flex: 1;
    padding: 16px;
    position: relative;
  }

  .coupon-name {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #333;
  }

  .coupon-validity {
    margin: 0;
    font-size: 14px;
    color: #666;
  }

  .coupon-status {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f5f5f5;
    color: #999;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
  }

  .no-coupon-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .no-coupon-option.active {
    border-color: #1c705e;
    background-color: #f0f8f5;
  }

  /* 支付结果样式 */
  .payment-result-modal {
    text-align: center;
    padding: 40px 20px;
  }

  .result-icon {
    font-size: 64px;
    margin-bottom: 20px;
  }

  .result-title {
    margin: 0 0 12px 0;
    font-size: 24px;
    color: #333;
  }

  .result-message {
    margin: 0 0 30px 0;
    color: #666;
    line-height: 1.5;
  }

  .result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  .result-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .result-btn:not(.secondary) {
    background-color: #1c705e;
    color: white;
  }

  .result-btn.secondary {
    background-color: #f5f5f5;
    color: #666;
  }

  .qr-with-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .text-below {
    color: #ff0000;
    font-size: 28px;
    font-weight: bold;
    margin: 5px;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .payment-content {
      padding: 16px;
    }

    .amount-display {
      flex-direction: column;
      align-items: center;
    }

    .currency {
      margin-right: 0;
      margin-bottom: 4px;
    }

    .result-actions {
      flex-direction: column;
    }
  }
</style>
